<template>
  <!-- 详情开始 -->
  <a-modal
    :maskClosable="false"
    title="归还记录"
    :width="1350"
    :bodyStyle="{
      padding: '0 24px',
    }"
    :visible="visible"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-tabs v-model="activeKey" @change="callback">
      <!-- 费用报销 -->
      <a-tab-pane key="1" tab="收款单明细" force-render>
        <a-card
          :bordered="false"
          :bodyStyle="{
            padding: '10px 24px',
          }"
        >
          <div class="table-page-search-wrapper">
            <a-form layout="inline" @keyup.enter.native="searchByquery">
              <a-row :gutter="24">
                <a-col :xl="6" :lg="7" :md="8" :sm="24">
                  <a-form-item
                    label="单据编号"
                    :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
                    :wrapperCol="{ xs: { span: 24 }, sm: { span: 12 } }"
                  >
                    <j-input placeholder="请输入单据编号" v-model="queryParam.billNo"></j-input>
                  </a-form-item>
                </a-col>
                <a-col :xl="6" :lg="7" :md="8" :sm="24">
                  <a-form-item label="认领人">
                    <select-user-by-dep :multi="false" v-model="queryParam.employeeId"></select-user-by-dep>
                  </a-form-item>
                </a-col>
                <a-col :xl="6" :lg="7" :md="8" :sm="24">
                  <a-form-item
                    label="汇款单位名称"
                    :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
                    :wrapperCol="{ xs: { span: 24 }, sm: { span: 12 } }"
                  >
                    <select-customer-input v-model="queryParam.remittanceUnit" />
                  </a-form-item>
                </a-col>
                <a-col :xl="6" :lg="7" :md="8" :sm="24">
                  <a-form-item
                    label="收款单位名称"
                    :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
                    :wrapperCol="{ xs: { span: 24 }, sm: { span: 12 } }"
                  >
                    <select-Company-input v-model="queryParam.payeeUnit" placeholder="请选择收款单位" />
                  </a-form-item>
                </a-col>
                <a-col :xl="6" :lg="7" :md="8" :sm="24">
                  <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                    <a-button type="primary" @click="searchByquery" icon="search">查询</a-button>
                    <a-button
                      type="primary"
                      @click=";(createTimeRange = []), searchReset()"
                      icon="reload"
                      style="margin-left: 8px"
                      >重置</a-button
                    >
                  </span>
                </a-col>
              </a-row>
            </a-form>
          </div>
          <!-- 查询区域-END -->

          <!-- table区域-begin -->
          <div>
            <a-table
              ref="table"
              rowKey="id"
              bordered
              :scroll="{ x: scrollX }"
              :components="draggableComponent"
              :columns="dragResizeColumns"
              :dataSource="dataSource"
              :pagination="ipagination"
              :loading="loading"
              class="j-table-force-nowrap"
              wrapClassName="ant-modal-cust-warp"
              @change="handleTableChange"
            >
              <span slot="action" slot-scope="text, record">
                <a @click="onDetail(record)">详情</a>
              </span>
            </a-table>
          </div>

          <!-- 详情开始 -->
          <a-modal
            :maskClosable="false"
            title="收款申请单单据详情"
            :width="1200"
            :bodyStyle="{
              padding: '0 24px',
            }"
            :visible="visibleDetail"
            @cancel="handleCancelDetail"
            cancelText="关闭"
          >
            <ErpFinanceCollectMoneyApplicationBillForm
              ref="realCollectMoneyForm"
              :disabled="true"
              normal
            ></ErpFinanceCollectMoneyApplicationBillForm>
            <template slot="footer">
              <a-button @click.stop="handleCancelDetail">关闭</a-button>
            </template>
          </a-modal>
          <!-- 详情结束 -->
        </a-card>
      </a-tab-pane>
      <a-tab-pane key="2" tab="关联投标保证金" force-render v-if="isTrue">
        <a-card
          :bordered="false"
          :bodyStyle="{
            padding: '10px 24px',
          }"
        >
          <div class="table-page-search-wrapper">
            <a-form layout="inline" @keyup.enter.native="searchByquerys">
              <a-row :gutter="24">
                <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="单据编号">
              <j-input placeholder="请输入单据编号" v-model="queryParams.billNo"></j-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="关联项目">
              <select-project-input  v-model="queryParams.preProjectId"  placeholder="请输入选择项目"/>
            </a-form-item>
          </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="汇款截止时间">
                <j-date
                    placeholder="请选择汇款截止时间"
                    v-model="queryParams.remittanceEndTime"
                    style="width: 100%"
                  />
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="收款单位名称">
                <select-customer-input v-model="queryParams.payeeUnit" commercialType="1" />
              </a-form-item>
            </a-col>
                <a-col :xl="6" :lg="7" :md="8" :sm="24">
                  <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                    <a-button type="primary" @click="searchByquerys" icon="search">查询</a-button>
                    <a-button
                      type="primary"
                      @click=";(createTimeRange = []), searchResets()"
                      icon="reload"
                      style="margin-left: 8px"
                      >重置</a-button
                    >
                  </span>
                </a-col>
              </a-row>
            </a-form>
          </div>
          <!-- 查询区域-END -->

          <!-- table区域-begin -->
          <div>
            <a-table
              ref="table"
              rowKey="id"
              bordered
              :scroll="{ x: scrollX }"
              :components="draggableComponent"
              :columns="dragResizeColumnss"
              :dataSource="dataSources"
              :pagination="ipaginations"
              :loading="loadings"
              class="j-table-force-nowrap"
              wrapClassName="ant-modal-cust-warp"
              @change="handleTableChanges"
            >
              <span slot="action" slot-scope="text, record">
                <a @click="onDetails(record)">详情</a>
              </span>
            </a-table>
          </div>

          <!-- 详情开始 -->
          <a-modal
            :maskClosable="false"
            title="保证金申请单单据详情"
            :width="1200"
            :bodyStyle="{
              padding: '0 24px',
            }"
            :visible="visibleDetails"
            @cancel="handleCancelDetails"
            cancelText="关闭"
          >
            <ErpFinanceProjectDepositBillForm
              ref="depositForm"
              :disabled="true"
              normal
            ></ErpFinanceProjectDepositBillForm>
            <template slot="footer">
              <a-button @click.stop="handleCancelDetails">关闭</a-button>
            </template>
          </a-modal>
          <!-- 详情结束 -->
        </a-card>
        <!-- 详情结束 -->
      </a-tab-pane>
    </a-tabs>
    <template slot="footer">
      <a-button
        @click.stop="
          () => {
            visible = false
          }
        "
        >关闭</a-button
      >
    </template>
  </a-modal>
  <!-- 详情结束 -->
</template>

<script>
import { filterObj } from '@/utils/util'
import { getAction } from '@/api/manage'
import SelectCompanyInput from '@/views/scy/components/SelectCompanyInput'
import SelectCustomerInput from '@/views/scy/components/SelectCustomerInput'
import SelectUserByDep from '@/views/scy/components/SelectUserByDep'
import { DragResizable } from '@/mixins/DragResizable'
import SelectProjectInput from '@/views/scy/components/SelectProjectInput'


export default {
  name: 'ErpFinancePaymentBillPenetrate',
  components: {
    ErpFinanceCollectMoneyApplicationBillForm: () =>
      import('@/views/erp/finance/collectMoney/modules/ErpFinanceCollectMoneyApplicationBillForm'),
      ErpFinanceProjectDepositBillForm: () =>
      import('@/views/erp/finance/deposit/modules/ErpFinanceProjectDepositBillForm'),
    SelectCompanyInput,
    SelectCustomerInput,
    SelectProjectInput,
    SelectUserByDep,
  },
  props: [],
  mixins: [DragResizable],
  data() {
    return {
      isTrue: false,
      activeKey: '1',
      createTimeRange: [],
      visibleDetail: false,
      visibleDetails: false,
      queryParam: {},
      queryParams: {},
      toggleSearchStatus: false,
      dragResizeColumns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '单据编号',
          align: 'center',
          dataIndex: 'billNo',
          scopedSlots: { customRender: 'billNo' },
          width: 240,
          ellipsis: true,
        },
        {
          title: '认领人',
          align: 'center',
          dataIndex: 'employeeId_dictText',
          width: 200,
          ellipsis: true,
        },
        {
          title: '汇款单位',
          align: 'center',
          dataIndex: 'remittanceUnit_dictText',
          width: 240,
          ellipsis: true,
        },
        {
          title: '收款单位',
          align: 'center',
          dataIndex: 'payeeUnit_dictText',
          width: 240,
          ellipsis: true,
        },
        {
          title: '汇款日期',
          align: 'center',
          dataIndex: 'remittanceDate',
          customRender: function (text) {
            return !text ? '' : text.length > 10 ? text.substr(0, 10) : text
          },
          width: 180,
          ellipsis: true,
        },
        {
          title: '汇款金额',
          align: 'center',
          dataIndex: 'remittanceAmount',
          width: 180,
          ellipsis: true,
        },
        {
          title: '是否为保证金',
          align: 'center',
          dataIndex: 'isDeposit_dictText',
          width: 150,
          ellipsis: true,
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          fixed: 'right',
          width: 160,
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'action',
          },
        },
      ],
      dragResizeColumnss: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '单据编号',
          align: 'center',
          dataIndex: 'billNo',
          scopedSlots: { customRender: 'billNo' },
          ellipsis: true,
          width: 180,
        },
        {
          title: '申请部门',
          align: 'center',
          dataIndex: 'proposerDeptId_dictText',
          width: 150,
          ellipsis: true,
        },
        {
          title: '关联项目',
          align: 'center',
          dataIndex: 'preProjectId_dictText',
          scopedSlots: { customRender: 'preProjectId' },
          width: 155,
          ellipsis: true,
        },
        {
          title: '项目承接人',
          align: 'center',
          dataIndex: 'projectUndertaker_dictText',
          width: 155,
          ellipsis: true,
        },
        {
          title: '保证金所属团队',
          align: 'center',
          dataIndex: 'teamId_dictText',
          width: 155,
          ellipsis: true,
        },
        {
          title: '费用类型',
          align: 'center',
          dataIndex: 'feeCategory_dictText',
          width: 155,
          ellipsis: true,
        },
        {
          title: '保证金金额(元)',
          align: 'center',
          dataIndex: 'remittanceAmount',
          width: 155,
          ellipsis: true,
        },
        {
          title: '服务费(元)',
          align: 'center',
          dataIndex: 'serviceCharge',
          width: 155,
          ellipsis: true,
        },
        {
          title: '利息金额(元)',
          align: 'center',
          dataIndex: 'interestAmount',
          width: 155,
          ellipsis: true,
        },
        {
          title: '归还金额(元)',
          align: 'center',
          dataIndex: 'returnAmount',
          scopedSlots: { customRender: 'returnAmount' },
          width: 155,
          ellipsis: true,
        },
        {
          title: '未还金额(元)',
          align: 'center',
          dataIndex: 'unreturnAmount',
          width: 155,
          ellipsis: true,
        },
        {
          title: '是否归还',
          align: 'center',
          dataIndex: 'isReturn_dictText',
          width: 155,
          ellipsis: true,
        },
        {
          title: '汇款单位名称',
          align: 'center',
          dataIndex: 'remittanceUnit_dictText',
          width: 155,
          ellipsis: true,
        },
        {
          title: '汇款截止时间',
          align: 'center',
          dataIndex: 'remittanceEndTime',
          customRender: function (text) {
            return !text ? '' : text.length > 10 ? text.substr(0, 10) : text
          },
          ellipsis: true,
          width: 155,
        },
        {
          title: '预计返款时间',
          align: 'center',
          dataIndex: 'estimateRefundTime',
          customRender: function (text) {
            return !text ? '' : text.length > 10 ? text.substr(0, 10) : text
          },
          ellipsis: true,
          width: 155,
        },
        {
          title: '流程状态',
          align: 'center',
          dataIndex: 'bpmStatus_dictText',
          ellipsis: true,
          width: 155,
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          fixed: 'right',
          width: 160,
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'action',
          },
        },
      ],
      url: {
        urlList: '/api/erp/finance/collectMoney/erpFinanceCollectMoneyApplicationBill/allList',
        queryById: '/api/erp/finance/collectMoney/erpFinanceCollectMoneyApplicationBill/queryById',
        depositLists: '/api/erp/finance/deposit/erpFinanceProjectDepositBill/allList',
        querydepositById: '/api/erp/finance/deposit/erpFinanceProjectDepositBill/queryById',
      },
      dataSource: [],
      loading: false,
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '50', '100', '200'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
      isorter: {
        column: 'createTime',
        order: 'desc',
      },
      dataSources: [],
      loadings: false,
      ipaginations: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '50', '100', '200'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
      isorters: {
        column: 'createTime',
        order: 'desc',
      },
      scrollTrigger: { x: true },
      visible: false,
      dictOptions: {},
      createTime: [],
      depositId: null,
      relDepositBill: null,
    }
  },
  created() {
    this.loadData()
    // 该方法触发屏幕自适应
    this.resetScreenSize()
    this.refresh()
    // 加载数据字典信息
    this.initDictConfig()
    this.dragResizeColumnswidth = this.dragResizeColumns.map((val) => {
      return val.width
    })
  },
  computed: {},
  methods: {
    initDictConfig() {},
    onDetail(record) {
      this.visible = false
      this.visibleDetail = true
      this.$nextTick(() => {
        getAction(this.url.queryById, { id: record.id }).then((res) => {
          if (!!res && !!res.result) {
            this.$refs.realCollectMoneyForm.edit(res.result)
          }
        })
      })
    },
    onDetails(record) {
      this.visible = false
      this.visibleDetails = true
      this.$nextTick(() => {
        getAction(this.url.querydepositById, { id: record.id }).then((res) => {
          if (!!res && !!res.result) {
            this.$refs.depositForm.edit(res.result)
          }
        })
      })
    },
    handleCancelDetail() {
      this.visible = true
      this.visibleDetail = false
    },
    handleCancelDetails() {
      this.visible = true
      this.visibleDetails = false
    },
    handleToggleSearch() {
      this.toggleSearchStatus = !this.toggleSearchStatus
    },
    handleTableChange(pagination, filters, sorter) {
      // 分页、排序、筛选变化时触发
      this.filters = {}
      if (Object.keys(filters).length > 0) {
        for (let key in filters) {
          let value = filters[key].join(',')
          if (value) {
            if (key.indexOf('_dictText') != -1) {
              key = key.substring(0, key.indexOf('_dictText'))
            }
            this.filters[key] = value
          }
        }
      }
      if (Object.keys(sorter).length > 0) {
        this.isorter.column = sorter.field
        this.isorter.order = sorter.order == 'ascend' ? 'asc' : 'desc'
      }
      this.ipagination = pagination
      this.loadData()
    },
    handleTableChanges(pagination, filters, sorter) {
      // 分页、排序、筛选变化时触发
      this.filters = {}
      if (Object.keys(filters).length > 0) {
        for (let key in filters) {
          let value = filters[key].join(',')
          if (value) {
            if (key.indexOf('_dictText') != -1) {
              key = key.substring(0, key.indexOf('_dictText'))
            }
            this.filters[key] = value
          }
        }
      }
      if (Object.keys(sorter).length > 0) {
        this.isorter.column = sorter.field
        this.isorter.order = sorter.order == 'ascend' ? 'asc' : 'desc'
      }
      this.ipagination = pagination
      this.loadDatas()
    },
    onCreateTimeChange(date, dateString) {
      this.$set(this.queryParam, 'createTime_begin', dateString[0] + ' 00:00:00')
      this.$set(this.queryParam, 'createTime_end', dateString[1] + ' 23:59:59')
    },
    callback(key) {
      if (key == 1) {
        //先清空数据
        this.dataSource = []
        this.ipagination.total = 0
        //查询数据
        this.loading = true
        this.searchReset()
      } else if (key == 2) {
        console.log(11111111)
        ///先清空数据
        this.dataSources = []
        this.ipaginations.total = 0
        //查询数据
        this.loadings = true
        this.searchResets()
      }
    },
    loadData(arg) {
      // 加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1
      }
      var params = this.getQueryParams() // 查询条件
      if (!this.depositId) {
        this.dataSource = []
        this.ipagination.total = 0
        return
      } else {
        params.depositBillId = this.depositId
        params.bpmStatus = '3'
      }
      getAction(this.url.urlList, params).then((res) => {
        if (res.success) {
          this.dataSource = res.result.records
          this.ipagination.total = res.result.total
          // 判断是否当前页没有数据且不为第一页
          if (this.dataSource.length == 0 && this.ipagination.current != 1) {
            this.ipagination.current = this.ipagination.current - 1
            this.loadData(this.ipagination.current - 1)
          } else {
            this.loading = false
          }
        }
      })
    },
    loadDatas(arg) {
      // 加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipaginations.current = 1
      }
      var params = this.getQueryParamss() // 查询条件
      console.log(this.relDepositBill)
      if (!this.relDepositBill) {
        this.dataSources = []
        this.ipaginations.total = 0
        return
      } else {
        params.relDepositBill = this.relDepositBill
        params.bpmStatus = '3'
      }
      console.log(this.relDepositBill)
      getAction(this.url.depositLists, params).then((res) => {
        if (res.success) {
          this.dataSources = res.result.records
          this.ipaginations.total = res.result.total
          // 判断是否当前页没有数据且不为第一页
          if (this.dataSources.length == 0 && this.ipaginations.current != 1) {
            this.ipaginations.current = this.ipaginations.current - 1
            this.loadDatas(this.ipaginations.current - 1)
          } else {
            this.loadings = false
          }
        }
      })
    },
    getQueryParams() {
      let param = Object.assign({}, this.queryParam, this.isorter)
      param.field = this.getQueryField()
      param.pageNo = this.ipagination.current
      param.pageSize = this.ipagination.pageSize
      return filterObj(param)
    },
    getQueryField() {
      let str = 'id,'
      for (let a = 0; a < this.dragResizeColumns.length; a++) {
        str += ',' + this.dragResizeColumns[a].dataIndex
      }
      return str
    },
    getQueryParamss() {
      let param = Object.assign({}, this.queryParams, this.isorter)
      param.field = this.getQueryFields()
      param.pageNo = this.ipagination.current
      param.pageSize = this.ipagination.pageSize
      return filterObj(param)
    },
    getQueryFields() {
      let str = 'id,'
      for (let a = 0; a < this.dragResizeColumns.length; a++) {
        str += ',' + this.dragResizeColumns[a].dataIndex
      }
      return str
    },
    searchReset() {
      this.createTime = []
      let that = this
      Object.keys(that.queryParam).forEach(function (key) {
        that.queryParam[key] = null
      })
      that.loadData(1)
    },
    searchResets() {
      this.createTime = []
      let that = this
      Object.keys(that.queryParams).forEach(function (key) {
        that.queryParams[key] = null
      })
      that.loadDatas(1)
    },
    searchByquery() {
      this.loadData(1)
    },
    searchByquerys() {
      this.loadDatas(1)
    },
    refresh() {
      this.loading = true
    },
    open(record) {
      this.loadData(1)
    },
    // 触发屏幕自适应
    resetScreenSize() {
      let screenWidth = document.body.clientWidth
      if (screenWidth < 500) {
        this.scrollTrigger = { x: 800 }
      } else {
        this.scrollTrigger = {}
      }
    },
    handleCancel() {
      this.visible = false
    },
    handleOk() {
      this.handleCancel()
    },
  },
}
</script>
<style scoped>
.ant-card-body .table-operator {
  margin-bottom: 18px;
}

.ant-table-tbody .ant-table-row td {
  padding-top: 15px;
  padding-bottom: 15px;
}

.anty-row-operator button {
  margin: 0 5px;
}

.ant-btn-danger {
  background-color: #ffffff;
}

.ant-modal-cust-warp {
  height: 100%;
}

.ant-modal-cust-warp .ant-modal-body {
  height: calc(100% - 110px) !important;
  overflow-y: auto;
}

.ant-modal-cust-warp .ant-modal-content {
  height: 90% !important;
  overflow-y: hidden;
}

.anty-img-wrap {
  height: 25px;
  position: relative;
}

.anty-img-wrap > img {
  max-height: 100%;
}
</style>